<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>在线客服</title>
		<%@include file="/WEB-INF/base.jspf"%> 
		<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="/kindeditor/themes/default/default.css" />
		<script src="https://at.alicdn.com/t/font_577691_cbd5g1lsegzdj9k9.js"></script> 
		 <script type="text/javascript" src="/js/jqthumb.js"></script> 
		 <script src="/js/font_595888_1jlcfz62jg8vkj4i.js"></script> 
		 <style type="text/css">
			.touxiang{
			width:10vw;
			height:10vw;
			border-radius: 4px;
			margin: 16px;
			background-size: 30px;
    max-width: 40px;
    max-height: 40px;
    min-width:40px;
    min-height:40px;
			}
			.tomyMessage {
				margin-right:10%;
			}
			.chatItem{margin-top: 10px;}
			.chatItem .content{background: white;border-radius:8px;padding: 10px;/* width: 65vw; */text-align: left;word-break:break-all;}
			/* .fromchatItem .content{margin-left: 14vw;} */
			.fromchatItem {
			display:flex;align-items:center;
			justify-content:flex-end;}
			.info .content {
				margin-top:10px;
				min-width:160px;
			}
			.fromchatItem .date{color:blue}
			.tochatItem .content{margin-left: 21vw;}
			.tochatItem .date{color:#008242}
			    .icon {
			       width: 1em; height: 1em;
			       vertical-align: -0.15em;
			       fill: currentColor;
			       overflow: hidden;
			    }
			    p {
			    	margin:0;
			    }
			    .tochatItem .date {
			    	margin-left:38vw;
			    }
			#content-chat  {
				overflow: auto;
				-webkit-overflow-scrolling : touch;
				position: relative;
/* 				z-index:20000; */
				z-index:1;
			}
			
			.ke-container-default {
				max-width:100vw;
			}
			.ke-statusbar {
				display: none;
			}
			.w-e-panel-container {
				z-index:3;
				max-width: 100%;
			}
			.w-e-text-container {
				height:60px!important;
			}
 			.w-e-text-container .w-e-panel-container {
				/* top:-520%; */
				width: 80vw!important;
			}
			.w-e-panel-tab-content {
				height:150px!important;
			}
			.svg-kefu {
				fill:#059bf3;width:10vw!important;height:10vw!important;margin:16px;max-width:60px;max-height:60px;min-width:60px;min-height:60px;		
			}
/* 			.w-e-text-container {
				position: static;
			} */
			.sendMyMessage img {
				float:right;
			}
			.sendMyMessage {
				margin-left:10%;
			}
			.sendMyMessage > span {
				margin-left:20vw;
				flex-direction: row-reverse;
			}
			.sendMyMessage > div > p {
				text-align: right;
			}			
			.w-e-panel-container {
/* 			    top: -40px!important; */
			    left:0!important;
			    margin-left:0!important;
			}
			.w-e-toolbar {
				height:40px!important;
			}
 			#div22 {
				position: static;
			}
			.date {
				display: inline-flex;
			    /* width: 65vw; */
			    justify-content: space-between;
			}
			.date span + span {
				margin-left:7px;
				top:1px;
				position: relative;
			}
			.glyphicon-send {
				/* height:50px!important; */
			display: flex;
			    align-items: center;
			    justify-content: center;
			}
			.w-e-menu {
				display:flex;
				align-items:center;
			}
			.w-e-text {
				background-color:white;
			}
			.clearfix:after {
				content:"";
				display:block;
				clear:both;
			}
			#div22 {
				float:left;
			}
			.w-e-toolbar {
				border: 1px solid rgb(204, 204, 204);
				background-color: rgb(236, 236, 236)
			}
			.tomyMessage {
				justify-content: flex-start;
			}
			.tomyMessage .messageInfo .content {
				margin-top: 10px;
			}
			
			#tipsbar{
				display: flex;
				z-index: 10000;
			}
			
			#div-i-tips{
				position: absolute;
				display: flex;
				justify-content: flex-start; 
				 align-items: center;
				max-width: 690px;
   				 margin: 0 auto;
				width:100%;
				bottom:30px;
				 z-index: 10000;
			}
			#div-i-tips ul{
				/* background-color: #fff;
				border: 1px solid #fff; */
				border-radius:5px;
				padding: 2px;
				width:80%;
				margin-left: 9.5%;
				
				
			}
			
			#div-i-tips ul li{
			padding:5px;
				/* display:flex;
				flex:1;
				width:100%;
				border: 1px solid #ddd;
				padding:5px; */
				
			}
			
			#div-i-tips ul li:hover{
				background-color: #ddd;
			}
			.modal-backdrop.in{
			 opacity: 0!important;
			}
			.fl{margin: 0 5px;}
			#zjxx tr *{font-size: 13px;}
			#zjxx tr td:nth-child(1){padding-left: 10px;}
			#zjxx tr td:nth-child(2) span{color: red;}
			  .icon {
			     width: 1em; height: 1em;
			     vertical-align: -0.15em;
			     fill: currentColor;
			     overflow: hidden;
			  }			
			#cai li{float: left;width: 33.3%;border-right:1px solid #E7E1E1;border-top:1px solid #E7E1E1;padding: 10px 0;height:100px;}
			.removeBr{border-right:1px solid white!important;}
			.bb{border-bottom:1px solid #E7E1E1;}
			#cai img{height:50px;}
			.modal-dialog {
				top:20%;
			}
			.div-c-chooseChatWrapper, .div-c-chooseChatWrapper > div {
				display:flex;
				align-items:center;
			}
			.div-c-chooseChatWrapper > div > span {
				margin-left:16px;
			}
			.modal-body .div-c-chooseChatWrapper + .div-c-chooseChatWrapper {
				border-top:1px solid #cecece;
			}
			.div-c-chooseChatWrapper {
				justify-content:space-between;
				padding:2vh;
			}
			.div-c-chooseChatWrapper svg {
				width:6vh;
				height:6vh;
				max-width:40px;
				max-height:40px;
			}
			.span-pointMoney {
				color:red!important;
				font-weight: bold;
				font-size:13px!important;
			}
			#span-i-websiteTitle {
				white-space: nowrap;
			}
			#cai li.cz, .div-c-chooseChatWrapper {
				cursor: pointer;
			}
			#table-i-lotterInfo td {
				text-align: left;
			}
			.modal {
				position: absolute;
			}
			body {
				padding-right:0!important;
			}
		    *.modal-open {  
			    overflow-y: auto;  
			    padding-right: 0 !important;  
			}  			
			.b1white {
				cursor: pointer;
			}
			
			#cai1 img{height:4rem;max-width:4.5rem;}
			/* #cai1 .col-xs-6{padding:13px;border:1px solid #F2F2F2}
			#cai1 .col-xs-4,#cai1 .col-xs-8{padding:0;}
			#cai1 .col-xs-8{text-align: left;padding-left:10px;} */
			#cai1 .name{font-size:15px;}
			#cai1 .des{font-size:12px;color:#AEAEAE;line-height:20px;}
			#cai1 td{padding:10px 0px 10px 5px;border-bottom:1px solid #F2F2F2}
			#cai1 tr td:nth-child(3){border-left:1px solid #F2F2F2}
			#cai1 tr:nth-child(1) td{border-top:1px solid #F2F2F2}
			#cai1 tr td:nth-child(1),#cai1 tr td:nth-child(3){width: 18%;}
			#cai1 tr td:nth-child(2),#cai1 tr td:nth-child(4){width: 32%;text-align: left;}
			
		</style>
	</head>

	<body style="" >
		<div id="loading" class="kd-loading">
	<div class="kd-spinner">
		<span class="bounce b1"></span>
		<span class="bounce b2"></span>
		<span class="bounce b3"></span>
	</div>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>请稍等，努力加载中...</p>
</div>
<!-- <div class='wapper' style="display:none"> -->
 		<div id="div-i-main" style="width:100%;max-width:690px;margin:0 auto;">
			<div id="header" style="display:flex;justify-content:space-between;align-items:center;padding:11px 10px;background-color:#059BF3;width:100%;">
				<a onclick="back()" class="glyphicon glyphicon-chevron-left" style="color: white;font-size:20px;cursor: pointer;"></a>
				<strong style="font-size: 20px;color:white;">
						<span id="span-i-customServiceStatus">请选择客服类型为你服务</span>
				</strong>
				<a onclick="closeWebSocket()" class="glyphicon glyphicon-off" style="color: white;font-size: 20px;cursor: pointer;"></a>		
			</div>
			<div id="content-chat" style="background: #DFDFDF;">
			
			</div>
			
			<div id="div-i-tips">
				<ul id='div-ul-id'>
					
				</ul>
			</div> 
			
			 
			
			<!-- <div id="footer" style="bottom:0;position: fixed;">
				<textarea id="chat-textarea" class="textarea" 
				 rows="3" cols=""
				 style="resize: none;
				 overflow:visible;
				 min-height:36px;
				 border:0;
				 border-right:1px solid silver; 
				 padding:8px 8px 0 8px;
				 outline: none;">
				 </textarea>
			</div> -->
			
			<div class="sendMessageWrapper" style="max-width:690px;">
				<div class="editarea-wrapper editarea-wrapper-active" style="margin-bottom:5px;">
					<svg class="icon" id="svg-i-toggleExtraTool" aria-hidden="true">
					    <use xlink:href="#icon-27CIRCLE"></use>
					</svg>	
					<div contenteditable="true" class="div-c-editArea">
					</div>
					<span class="span-c-sendNewMessage">发送</span>
				</div>
				<div class="div-c-extraTool">
					<svg class="icon w-e-menu" id="svg-i-toggleEMOJITool" aria-hidden="true">
					    <use xlink:href="#icon-smile"></use>
					</svg>
					<div class="w-e-panel-container" contenteditable=false style="width:300px; margin-left:-150px;">
						<!-- <i class="w-e-icon-close w-e-panel-close"></i> -->
						<ul class="w-e-panel-tab-title">
						<li data-index="1" class="w-e-item w-e-active">默认</li>
						<li data-index="2" class="w-e-item">新浪</li>
						<li data-index="3" class="w-e-item">emoji</li>
						</ul>
						<div class="w-e-panel-tab-content" style="height:200px; overflow-y:auto;">
						<div class="w-e-emoticon-container w-e-emoticon-container-active" id="w-e-emoticon-container1"><span class="w-e-item">
						<img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png" alt="[坏笑]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png" alt="[舔屏]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3c/pcmoren_wu_org.png" alt="[污]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/2c/moren_yunbei_org.png" alt="[允悲]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3a/moren_xiaoerbuyu_org.png" alt="[笑而不语]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3c/moren_feijie_org.png" alt="[费解]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/37/moren_chongjing_org.png" alt="[憧憬]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/fc/moren_bbjdnew_org.png" alt="[并不简单]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/5c/huanglianwx_org.gif" alt="[微笑]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/8a/pcmoren_cool2017_org.png" alt="[酷]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/tootha_org.gif" alt="[嘻嘻]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6a/laugh.gif" alt="[哈哈]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/14/tza_org.gif" alt="[可爱]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/af/kl_org.gif" alt="[可怜]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/wabi_org.gif" alt="[挖鼻]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/f4/cj_org.gif" alt="[吃惊]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6e/shamea_org.gif" alt="[害羞]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/c3/zy_org.gif" alt="[挤眼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/29/bz_org.gif" alt="[闭嘴]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/71/bs2_org.gif" alt="[鄙视]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/lovea_org.gif" alt="[爱你]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/9d/sada_org.gif" alt="[泪]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/19/heia_org.gif" alt="[偷笑]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/8f/qq_org.gif" alt="[亲亲]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/b6/sb_org.gif" alt="[生病]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/58/mb_org.gif" alt="[太开心]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d9/landeln_org.gif" alt="[白眼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/98/yhh_org.gif" alt="[右哼哼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/zhh_org.gif" alt="[左哼哼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/a6/x_org.gif" alt="[嘘]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/af/cry.gif" alt="[衰]" data-w-e="1"></span></div><div id="w-e-emoticon-container2" class="w-e-emoticon-container" style="display:none;"><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif" alt="[草泥马]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif" alt="[神马]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/fuyun_thumb.gif" alt="[浮云]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c9/geili_thumb.gif" alt="[给力]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f2/wg_thumb.gif" alt="[围观]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/vw_thumb.gif" alt="[威武]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/panda_thumb.gif" alt="[熊猫]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/81/rabbit_thumb.gif" alt="[兔子]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/otm_thumb.gif" alt="[奥特曼]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/15/j_thumb.gif" alt="[囧]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/hufen_thumb.gif" alt="[互粉]" data-w-e="1"></span><span class="w-e-item"><img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c4/liwu_thumb.gif" alt="[礼物]" data-w-e="1"></span></div><div id="w-e-emoticon-container3" class="w-e-emoticon-container" style="display:none;"><span class="w-e-item">😀</span><span class="w-e-item">😃</span><span class="w-e-item">😄</span><span class="w-e-item">😁</span><span class="w-e-item">😆</span><span class="w-e-item">😅</span><span class="w-e-item">😂</span><span class="w-e-item">😊</span><span class="w-e-item">😇</span><span class="w-e-item">🙂</span><span class="w-e-item">🙃</span><span class="w-e-item">😉</span><span class="w-e-item">😌</span><span class="w-e-item">😍</span><span class="w-e-item">😘</span><span class="w-e-item">😗</span><span class="w-e-item">😙</span><span class="w-e-item">😚</span><span class="w-e-item">😋</span><span class="w-e-item">😜</span><span class="w-e-item">😝</span><span class="w-e-item">😛</span><span class="w-e-item">🤑</span><span class="w-e-item">🤗</span><span class="w-e-item">🤓</span><span class="w-e-item">😎</span><span class="w-e-item">😏</span><span class="w-e-item">😒</span><span class="w-e-item">😞</span><span class="w-e-item">😔</span><span class="w-e-item">😟</span><span class="w-e-item">😕</span><span class="w-e-item">🙁</span><span class="w-e-item">😣</span><span class="w-e-item">😖</span><span class="w-e-item">😫</span><span class="w-e-item">😩</span><span class="w-e-item">😤</span><span class="w-e-item">😠</span><span class="w-e-item">😡</span><span class="w-e-item">😶</span><span class="w-e-item">😐</span><span class="w-e-item">😑</span><span class="w-e-item">😯</span><span class="w-e-item">😦</span><span class="w-e-item">😧</span><span class="w-e-item">😮</span><span class="w-e-item">😲</span><span class="w-e-item">😵</span><span class="w-e-item">😳</span><span class="w-e-item">😱</span><span class="w-e-item">😨</span><span class="w-e-item">😰</span><span class="w-e-item">😢</span><span class="w-e-item">😥</span><span class="w-e-item">😭</span><span class="w-e-item">😓</span><span class="w-e-item">😪</span><span class="w-e-item">😴</span><span class="w-e-item">🙄</span><span class="w-e-item">🤔</span><span class="w-e-item">😬</span><span class="w-e-item">🤐</span>
						</div></div></div>						
				</div>					
			</div>
		</div>
		<%--  <div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center bg-primary" style="height: 50px;line-height:50px;position: fixed;margin-top: 0px;left: 0px;z-index: 100;">
			<a onclick="back()" class="glyphicon glyphicon-chevron-left fl" style="color: white;margin-top: 13px;font-size: 20px;"></a>
			<strong style="font-size: 20px;">在线客服</strong>
			<a onclick="closeWebSocket()" class="glyphicon glyphicon-off fr" style="color: white;margin-top: 13px;font-size: 20px;"></a>
		</div>
		<div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center" style="padding: 0;">
			<div style="height: 50px;"></div>
			<div class="chatList" style="height: 80vh;overflow:auto;">
				<div style="height: 80px;" class="zhanwei"></div>
			</div>
			<div style="position: fixed;bottom:0;left:0;width:100%;height: 80px;background: white;border:1px solid silver;">
				<!-- <span class="glyphicon glyphicon-plus-sign fl" style="color: gray;font-size: 7vw;margin-left: 1vw;margin-top: 1vw;"></span> -->
				<textarea id="chat-textarea" class="textarea" rows="3" cols="" style="resize: none;overflow:visible;width: 86.5vw;min-height:36px;border:0;border-right:1px solid silver; margin-top: 0.2vw;padding:8px 8px 0 8px ;outline: none;"></textarea>
				<a class="glyphicon glyphicon-send fr" style="color: gray;font-size: 7vw;margin-right: 3vw;margin-top: 20px;" onclick="send()"></a>
			</div>
		</div> --%>
		<!-- <audio id="audioPlay" src="/cp/music/MessageSending.mp3"></audio> -->
		
<div class="modal-div-fakeModal" id="div-i-noticeGenDan">
	<div class="div-c-modalContent">
		<h3 class="fakemodal-title"></h3>
		<div class="fakemodal-content"></div>
		<div class="fakemodal-btnsGroup"><button class="btn btn-default btn-class-closeFakeModal">关闭</button></div>
	</div>
</div>

<div class="div-c-noticeContentDiv animated bounceIn" id='div-list' style="background-color: rgb(242, 242, 242);">
	<div class="noticeContentInner">
		<!-- <div class="title" style="background-color:#059BF3;justify-content: center;">
		<span class="title" style="text-align: center;">客服系统</span>
			<div class="div-c-svgWrapper">
				<svg class="icon" aria-hidden="true" style="fill:white">
					<use xlink:href="#icon-14CIRCLE">
					</use>
				</svg>
			</div>
		</div> -->
		<div  id='div-kf-id'>
			<div class="div-c-chooseChatWrapper" data-type="kefu" style="margin-top: 40px;">
            		<div>
            			<svg class="icon" aria-hidden="true" style="fill: #059BF3;">
					  	  <use xlink:href="#icon-kefu"></use>
						</svg>
						<span id='cztxzx'>充值提现咨询</span>
            		</div>
             			<svg class="icon" aria-hidden="true" style="fill: #059BF3;">
					  	  <use xlink:href="#icon-1202youjiantou"></use>
						</svg>           		
            	</div>
            	<div class="div-c-chooseChatWrapper" data-type="kefu">
            		<div>
            			<svg class="icon" aria-hidden="true" style="fill: #059BF3;">
					  	  <use xlink:href="#icon-kefu"></use>
						</svg>
						<span id='span-yxyhzx'>游戏优惠咨询</span>
            		</div>
             			<svg class="icon" aria-hidden="true" style="fill: #059BF3;">
					  	  <use xlink:href="#icon-1202youjiantou"></use>
						</svg>           		
            	</div>
            	<div class="div-c-chooseChatWrapper" data-type="kefu">
            		<div>
            			<svg class="icon" aria-hidden="true" style="fill: #059BF3;">
					  	  <use xlink:href="#icon-kefu"></use>
						</svg>
						<span id='span-xgxxzx'>修改信息咨询</span>
            		</div>
             			<svg class="icon" aria-hidden="true" style="fill: #059BF3;">
					  	  <use xlink:href="#icon-1202youjiantou"></use>
						</svg>           		
            	</div>
		</div>
		<div  id='div-kf-id-myzx' style="display:none;margin-top: 50px;">
            	<div class="div-c-chooseChatWrapper" data-type="kefu">
            		<div>
            			<svg class="icon" aria-hidden="true" style="fill: #059BF3;">
					  	  <use xlink:href="#icon-kefu"></use>
						</svg>
						<span id='span-xgxxzx'>当前客服不在线</span>
							<!--  -->
            		</div>
             			<svg class="icon" aria-hidden="true" style="fill: #059BF3;">
					  	  <use xlink:href="#icon-1202youjiantou"></use>
						</svg>           		
            	</div>
            	<div class="div-c-chooseChatWrapper" data-type="kefu">
            		<!-- <a onclick="back()"><button style="font-size:0.2rem;cursor:pointer;padding:0.8rem 2rem;border-radius:21px;height:auto;color:white;background-color:#059bf2;margin-left: 19px;" id='button-tuichu'>推出</button></a>
					<button style="font-size:0.2rem;cursor:pointer;padding:0.8rem 2rem;border-radius:21px;height:auto;color:white;background-color:#059bf2;margin-left: 105px;" id='button-chongs'>重试</button> -->
					 <a onclick="back()"><button class="btn btn-primary btn-save-btn" style="background-color:#059BF3;border-radius: 10px;border:1px solid #059BF3">退出</button></a>
					 <button class="btn btn-primary btn-save-btn" style="background-color:#059BF3;border-radius: 10px;border:1px solid #059BF3" id='button-chongshi'>重试</button>
				</div>
				
		</div>
		
		
	</div>
</div> 
<!-- </div> -->
		
		
	</body>
	<script type="text/javascript">
	document.onreadystatechange = function(){ 
		　　 if(document.readyState == "complete"){ 　　//当页面加载状态为完全结束时进入 
		    　 //你要做的操作。
			 $(".wapper").show() 
			 $(".kd-loading").hide()
		   　 }
		}
		var index
		var kfid
		var nick_name
		$("#div-kf-id .div-c-chooseChatWrapper").on("click",function(e){
			index = $(this).index()+1;
			$.ajax({
				type:"post",
				url:"/chat/kefu.do",	
				data:{
					"type":index,
				},
				success:function(data){
					if(data.data.id != null){
						kfid = data.data.id
						nick_name = data.data.nick_name
						var $parentDiv = $(e.currentTarget).closest(".div-c-noticeContentDiv")
							$parentDiv.removeClass("bounceIn").addClass("bounceOut").one(animationEnd($parentDiv[0]), function(e) {
							$(e.currentTarget).remove()
						}) 
						$("#span-i-customServiceStatus").text(data.data.nick_name+"为你服务")
						$("#content-chat").append("<div class='fromchatItem chatItem tomyMessage'><svg class='svg-kefu' class='icon fl' aria-hidden='true'><use xlink:href='#icon-service'></use></svg><div class='messageInfo'><span class='date'><span>"+data.data.nick_name+"</span><span>.......</span></span>"
						+"<div class='content'>亲，欢迎您来到本站，下面由我为你提供咨询服务，请问你咨询什么呢，亲"
						+"</div></div></div>")
						reconnect()
					}else{
						$("#div-kf-id")[0].style.display="none"; 
						$("#div-kf-id-myzx")[0].style.display="flow-root"; 
					}
				},
			});
		})
		$("#button-chongshi").on("click",function(){
			$("#div-kf-id")[0].style.display="flow-root"; 
			$("#div-kf-id-myzx")[0].style.display="none"; 
		})
		//读取 
		var content
		var cpLock = false;
		$('.div-c-editArea').on('compositionstart', function (event) {
			cpLock = true;
		});
		$('.div-c-editArea').on('compositionend', function () {
			cpLock = false;
		});
		
	 	$(".div-c-editArea").keyup(function(event){
			$("#div-i-tips")[0].style.display="flex"; 
			content=$(".div-c-editArea").html()
			if(content==""){
				$("#div-i-tips")[0].style.display="none";
			}
			if(event.keyCode ==13 || event.keyCode ==32){
				return;
			}
			if (!cpLock){
		    	$.ajax({
					type:"post",
					url:"/chat/findLikeContentType.do",
					data:{
						"keyWord":content,
					},
					success:function(data){
						if(data != null){
						}
						$("#div-ul-id").empty()
						for(var i = 0; i<data.data.length;i++){
							var html="<li class='div-ul-li'>"+data.data[i].content+"</li>";
							$("#div-ul-id").append(html) 
						}
						$("#div-ul-id").on("click",".div-ul-li",function(e){
							$(".div-c-editArea").text(e.currentTarget.innerHTML)
							$("#div-i-tips")[0].style.display="none"; 
						})
					},
				});
	       }
		}) 
	

	$(".div-c-editArea").keyup(function(event){
		 $("#div-i-tips")[0].style.display="flex"; 
		if(event.keyCode ==13 || event.keyCode ==32){
			$.ajax({
				type:"post",
				url:"/chat/findLikeContentType.do",
				data:{
					"keyWord":content,
				},
				success:function(data){
					if(data != null){
					}
					$("#div-ul-id").empty()
					for(var i = 0; i<data.data.length;i++){
						var html="<li class='div-ul-li'>"+data.data[i].content+"</li>";
						$("#div-ul-id").append(html) 
					}
					$("#div-ul-id").on("click",".div-ul-li",function(e){
						$(".div-c-editArea").text(e.currentTarget.innerHTML)
						$("#div-i-tips")[0].style.display="none"; 
					})
				},
			});
		}
		
	}); 
	
	
	
	bindEditContentEvent()
 		var setContentHeight = function() {
			var allHeight = document.documentElement.clientHeight
 			document.querySelector("#div-i-main").style.height = allHeight + "px"		
			var headerHeight = document.querySelector("#header").clientHeight
			var footer = document.querySelector(".sendMessageWrapper").clientHeight
			var restHeight = allHeight - headerHeight - footer
			var chatDiv = document.querySelector("#content-chat")
			chatDiv.style.height = restHeight+ "px"
		}

			/* var websocket = null;
			var url=window.location.href.replace("chat/userKefu.do","").replace("http","ws")
			//判断当前浏览器是否支持WebSocket
			if ('WebSocket' in window) {
				websocket = new WebSocket(url+"websocket?name=${user.id }");
			} else {
				alert('Not support websocket');
			};
			*/
		//当断开连接的时候重连服务器
		var rews = null;
		function reconnect (){
		  	 var url=window.location.href.replace("chat/userKefu.do","").replace("http","ws")
		 	  rews = new WebSocket(url+"websocket?name=${user.id }");
			//连接发生错误的回调方法
			 rews.onerror = function() {
				setMessageInnerHTML("k45jk459fgjdf986kjh98fgdkj3i45y89fdh4598hp90u发生了错误，无法连接聊天系统，请退出重试");
			};
		    
		  //接收到消息的回调方法
			rews.onmessage = function(event) {
				setMessageInnerHTML(event.data);
			};
		    
		    
		    
			//连接关闭的回调方法
			rews.onclose = function() {
				disConnect()
				setMessageInnerHTML("k45jk459fgjdf986kjh98fgdkj3i45y89fdh4598hp90u断开连接，对方将不再收到你的消息");
			};

			//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
			window.onbeforeunload = function() {
				rews.close();
			}; 
		}
	
		//连接成功建立的回调方法
		/* websocket.onopen = function(event){
		  setMessageInnerHTML("open");
		}; */
	
		//将消息显示在网页上
		function setMessageInnerHTML(message) {
			
			/* var audio = document.getElementById( "audioPlay" );
		    audio.play(); */
			var dataArray = message.split("k45jk459fgjdf986kjh98fgdkj3i45y89fdh4598hp90u")
			$("#content-chat").append("<div class='fromchatItem chatItem tomyMessage'><svg class='svg-kefu' class='icon fl' aria-hidden='true'><use xlink:href='#icon-service'></use></svg><div class='messageInfo'><span class='date'><span>"+nick_name+"</span><span>" + date() + "</span></span>"
					+"<div class='content'>"+dataArray[1]
					+"</div></div></div>")
			$('#content-chat').scrollTop($('#content-chat')[0].scrollHeight);
		};
		//关闭连接
		function closeWebSocket() {
			var message = ${user.id }+"k45jk459fgjdf986kjh98fgdkj3i45y89fdh4598hp90ukefu"+kfid+"k45jk459fgjdf986kjh98fgdkj3i45y89fdh4598hp90u<img class='disconnect-img' src='../img/disconnect.png' />断开连接";
			rews.send(message);			
			rews.close();
		};
		//发送消息
		function send() {
			var messageValue = $(".div-c-editArea").html().trim()
			if (messageValue == "") {
				return
			}
			var message = ${user.id }+"k45jk459fgjdf986kjh98fgdkj3i45y89fdh4598hp90ukefu"+kfid+"k45jk459fgjdf986kjh98fgdkj3i45y89fdh4598hp90u"+ messageValue
			rews.send(message);
			$("#content-chat").append("<div class='fromchatItem chatItem sendMyMessage'><div class='info'><span style='color: #008242;' class='date'><span>${user.nicheng}</span><span>" + date() + "</span></span>" + "<div class='content'>"+messageValue+"</div></div><img class='touxiang fl' src='/d/cp/${user.avatar }'></img>"
					+"</div>")
			$(".div-c-editArea").html("")
			$('#content-chat').scrollTop($('#content-chat')[0].scrollHeight);
			$(".div-c-editArea")[0].blur()
		};
		/* 补0 */
		//$(document).height()
		function checkTime(i) {
			if (i < 10) {
				i = "0" + i;
			}
			return i;
		}
		function date() {
			var today = new Date;
			var y = checkTime(today.getFullYear());
			var mm = checkTime(today.getMonth() + 1);
			var d = checkTime(today.getDate());

			var h = checkTime(today.getHours());
			var m = checkTime(today.getMinutes());
			var s = checkTime(today.getSeconds());
			y = h + ':' + m + ':' + s;
			return y;
		}
		stopUserScaleScreenIOS()
		setContentHeight()
		$(".span-c-sendNewMessage").on(getEndClickEvent(), function(event) {
			if ($(".div-c-editArea").html().length > 1500) {
				showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "超出最大字数")
				return
			}
			send()
		})	
		window.onbeforeunload = function (e) {
			closeWebSocket()
		};
		
		</script>
		
</html>